<template>
	<view>
		<nav-bar color="#000000" bbtn navbarColor v-show="navBarShow">关注管理</nav-bar>
		<!-- 关注商圈 -->
		<view class="section-1">
			<view class="content">
				<view class="text">关注商圈</view>
				<view class="address" @click="oncity">
					<image class="image" src="../../static/image/search/icon_dingwei@3x.png" mode=""></image>
					<text class="text">{{ region }}</text>
					<popup-layer ref="popupRef" :direction="'right'">
						<view style="width:750upx;height: 100%;"><citySelect @back_city="back_city"></citySelect></view>
					</popup-layer>
					<image class="icon" src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 商圈列表 -->
		<view class="section-2">
			<view class="list">
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
			</view>
		</view>
		<!-- 关注内容 -->
		<view class="section-3">
			<view class="text">关注内容</view>
			<view class="list">
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
				<view class="item" :class="{ itemColor: activeItemColor }" @click="colorChange">吾悦广场</view>
			</view>
		</view>
		<!-- 确认 -->
		<view class="section-4"><view class="sureBtn" @click="submitBtn">确认</view></view>
	</view>
</template>

<script>
import citySelect from '@/components/citySelect/city-select.vue'; //地址组件
import popupLayer from '@/components/citySelect/popup-layer.vue'; //地址组件
export default {
	components: {
		citySelect,
		popupLayer
	},
	data() {
		return {
			region: '成都市龙泉驿区', //地址显示
			navBarShow: true, //导航栏显示隐藏
			activeItemColor:'',
		};
	},
	methods: {
		//地址跳转
		oncity() {
			var that = this;
			this.$refs.popupRef.show();
			this.navBarShow = false;
		},
		back_city(e) {
			this.navBarShow = true;
			if (e !== 'no') {
				this.region = e.cityName;
				this.$refs.popupRef.close();
			} else {
				this.$refs.popupRef.close();
			}
		}
	}
};
</script>

<style lang="scss">
* {
	padding: 0;
	margin: 0;
	font-size: 0.75rem;
	box-sizing: border-box;
}
page {
	background-color: #ffffff;
}
.section-1 {
	.content {
		display: flex;
		width: 100%;
		padding: 30rpx;
		margin-top: 80rpx;
		justify-content: space-between;
		.text {
			font-size: 34rpx;
			margin-left: 20rpx;
		}
		.address {
			width: 400rpx;
			height: 40rpx;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.image {
				width: 40rpx;
				height: 35rpx;
			}
			.image,
			.text,
			.icon {
				// border: 1px red  solid;
				margin: 0 10rpx;
				font-size: 26rpx;
			}
			.icon {
				width: 20rpx;
				height: 30rpx;
			}
		}
	}
}
.section-2 {
	.list {
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.item {
		width: 30%;
		height: 60rpx;
		margin: 10rpx;
		padding: 5rpx;
		text-align: center;
		color: #ffffff;
		line-height: 50rpx;
		border-radius: 30rpx;
		background: linear-gradient(to right, #fd6431, #ff9972);
	}
}
.section-3 {
	margin: 20rpx 0;
	.text {
		margin: 20rpx 50rpx;
		font-size: 34rpx;
	}
	.list {
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.item {
		width: 30%;
		height: 60rpx;
		margin: 10rpx;
		padding: 5rpx;
		text-align: center;
		color: #ffffff;
		line-height: 50rpx;
		border-radius: 30rpx;
		background: linear-gradient(to right, #fd6431, #ff9972);
	}
}
.section-4 {
	.sureBtn {
		width: 80%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		border-radius: 50rpx;
		font-size: 36rpx;
		margin: 50rpx auto;
		background: linear-gradient(to top, #fd6431, #ff9972);
	}
}
</style>
